import {
  ProForm,
  ProFormDependency,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
} from "@ant-design/pro-components";
import { message } from "antd";

import React from "react";

const Page9: React.FC = () => {
  const handleSubmit = async (values: any) => {
    console.log("表单数据:", values);
    message.success("提交成功！");
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>条件表单</h1>
      <ProForm
        onFinish={handleSubmit}
        layout="vertical"
        style={{ maxWidth: 600 }}
      >
        <ProFormSelect
          name="orderType"
          label="订单类型"
          options={[
            { label: "普通订单", value: "normal" },
            { label: "VIP订单", value: "vip" },
            { label: "批发订单", value: "wholesale" },
          ]}
          rules={[{ required: true, message: "请选择订单类型" }]}
        />

        <ProFormDependency name={["orderType"]}>
          {({ orderType }) => {
            if (orderType === "vip") {
              return (
                <ProFormText
                  name="vipCode"
                  label="VIP码"
                  placeholder="请输入VIP码"
                  rules={[{ required: true, message: "请输入VIP码" }]}
                />
              );
            }
            if (orderType === "wholesale") {
              return (
                <ProFormDigit
                  name="minQuantity"
                  label="最小订购量"
                  placeholder="请输入最小订购量"
                  min={1}
                  rules={[{ required: true, message: "请输入最小订购量" }]}
                />
              );
            }
            return null;
          }}
        </ProFormDependency>

        <ProFormText
          name="customerName"
          label="客户姓名"
          placeholder="请输入客户姓名"
          rules={[{ required: true, message: "请输入客户姓名" }]}
        />
      </ProForm>
    </div>
  );
};

export default Page9;
